<template>
    <div>
<header></header>

 <h2>我的订单</h2>
 <div class="order_list" >
    <div class="order_list_title">
        <div class="order_list_title_woerma">《红楼梦》</div>
        <div class="order_list_title_yijingquxiao">已取消</div>
    </div>
    <div class="order_list_content">
        <div class="content_img">
            <img src="../../assets/hongloumeng/微信图片_20220727104322.jpg" alt="">
        </div>
         <div class="content_img">
            <img src="../../assets/hongloumeng/微信图片_20220727104322.jpg" alt="">
        </div> <div class="content_img">
            <img src="../../assets/hongloumeng/微信图片_20220727104322.jpg" alt="">
        </div>
        <div class="price">￥222</div>
        <div class="order_list_save">共6件</div>
    </div>
 </div>

 <div class="order_list" >
    <div class="order_list_title">
        <div class="order_list_title_woerma">《红楼梦》</div>
        <div class="order_list_title_yijingquxiao">已取消</div>
    </div>
    <div class="order_list_content">
        <div class="content_img">
            <img src="../../assets/hongloumeng/微信图片_20220727104322.jpg" alt="">
        </div>
         <div class="content_img">
            <img src="../../assets/hongloumeng/微信图片_20220727104322.jpg" alt="">
        </div> <div class="content_img">
            <img src="../../assets/hongloumeng/微信图片_20220727104322.jpg" alt="">
        </div>
        <div class="price">￥222</div>
        <div class="order_list_save">共6件</div>
    </div>
 </div>

 <div class="order_list" >
    <div class="order_list_title">
        <div class="order_list_title_woerma">《红楼梦》</div>
        <div class="order_list_title_yijingquxiao">已取消</div>
    </div>
    <div class="order_list_content">
        <div class="content_img">
            <img src="../../assets/hongloumeng/微信图片_20220727104322.jpg" alt="">
        </div>
         <div class="content_img">
            <img src="../../assets/hongloumeng/微信图片_20220727104322.jpg" alt="">
        </div> <div class="content_img">
            <img src="../../assets/hongloumeng/微信图片_20220727104322.jpg" alt="">
        </div>
        <div class="price">￥222</div>
        <div class="order_list_save">共6件</div>
    </div>
 </div>
 <div class="order_list" >
    <div class="order_list_title">
        <div class="order_list_title_woerma">《红楼梦》</div>
        <div class="order_list_title_yijingquxiao">已取消</div>
    </div>
    <div class="order_list_content">
        <div class="content_img">
            <img src="../../assets/hongloumeng/微信图片_20220727104322.jpg" alt="">
        </div>
         <div class="content_img">
            <img src="../../assets/hongloumeng/微信图片_20220727104322.jpg" alt="">
        </div> <div class="content_img">
            <img src="../../assets/hongloumeng/微信图片_20220727104322.jpg" alt="">
        </div>
        <div class="price">￥222</div>
        <div class="order_list_save">共6件</div>
    </div>
 </div>
  <Docker :index="3"/>
    </div>
    
    
</template>

<script setup>
import Docker from '../../components/Docker.vue'
import{ref}from 'vue'
let list=ref([])
// let url = 'http://shop.bluej.cn/api/order?project_id=24'
// fetch(url).then(res=>res.json()).then(res=>{list.value = res.result.rows;console.log(res);})
</script>

<style lang="scss" scoped>
header{
    position:fixed;
    top:0;
    width: 100%;
    height: 0.2rem;
    background-color: pink;
}
h2{
    margin-left:1.56rem;
    margin-top:0.31rem;   
}
.order_list{
    margin:0 auto;
    margin-bottom:0.2rem;
    width: 3.39rem;
    height: 1.1rem;
    background-color: #f1f1f1;
    border-radius: 0.05rem;
    box-shadow: 0 0.08rem 0.16rem 0 rgba(0,0,0,0.08);
}
.order_list_title{
      width: 3.39rem;
        height: 0.22rem;

}
.order_list_title_woerma{
    float:left;
    margin-top:0.16rem;
    margin-left:0.16rem;
    width: 1rem;
    height: 0.22rem;
    font-size:0.16rem;
}
.order_list_title_yijingquxiao{
     margin-top:0.16rem;
    float:right;
    margin-right:0.16rem;
    width: 0.42rem;
    height: 0.2rem;
    font-size:0.14rem;
}
.order_list_content{
     margin-top:0.26rem;
      width: 3.39rem;
      height: 0.4rem;
     
}
.content_img{
    float:left;
    margin-left:0.16rem;
    width: 0.4rem;
    height: 0.4rem;
    img{
        display: block;
        width: 0.4rem;
        height: 0.4rem;

    }
}
.price{
    float:right;
    width: 0.46rem;
    height: 0.2rem;
    color:#E93B3B;
    font-size:0.14rem;
}
.order_list_save{
    float:right;
    width: 0.32rem;
    height: 0.14rem;
    font-size:0.12rem;
    margin-right:-0.36rem;
    margin-top:0.24rem;
}
</style>